<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2024-05-24 14:15:41
-->
<script setup>
import { ref, watch, reactive, onMounted } from "vue";
import { createUrlValidator ,validatorVideoTitle} from '@/utils/validator.js';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  appendBody: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
    default: "600",
  },
  // 可通过 插槽自定义
  title: {
    type: String,
    default: "dialog",
  },
  // 遮罩层
  modal: {
    type: Boolean,
    default: true,
  },
  // 关闭按钮显示状态
  showClose: {
    type: Boolean,
    default: true,
  },
  // 使对话框水平垂直居中
  alineCenter: {
    type: Boolean,
    default: true,
  },
  // 内容居中
  center: {
    type: Boolean,
    default: false,
  },
  // 关闭时销毁=== v-if
  destroyDialog: {
    type: Boolean,
    default: true,
  },
  // 拖拽
  draggable: {
    type: Boolean,
    default: false,
  },
  // 让拖拽范围超出可视区
  overflow: {
    type: Boolean,
    default: false,
  },
  itemRow: {
    type: Object,
    default: () => {},
  },
  clickBlankToClose: {
    type: Boolean,
    default: false,
  },
  formData: {
    type: Object,
    default: () => {},
  },
  channeOptions: {
    type: Array,
    default: () => [
      {
        value: 1,
        label: "微信",
        disabled: false,
      },
      {
        value: 2,
        label: "京东",
        disabled: false,
      },
      {
        value: 3,
        label: "天猫",
        disabled: false,
      },
    ],
  },
});
const dialogVisible = ref(false);
const emit = defineEmits(["update:modelValue", "updateTable"]);
const channeOptions = ref([
  {
    value: 1,
    label: "微信",
  },
  {
    value: 2,
    label: "京东",
  },
  {
    value: 3,
    label: "天猫",
  },
]);
let form = reactive({
  src: "", //视频链接
  poster: "", //封面图链接：
  videoTitle: "", //视频标题
  showLogo: false, //是否显示logo
});


const ruleFormRef = ref(null);
const rules = reactive({
  src: [{ required: true, validator: createUrlValidator('视频链接'), trigger: "blur" }],
  poster: [{ required: true, validator: createUrlValidator('封面图链接'), trigger: "blur" }],
  videoTitle: [
    { required: true, validator: validatorVideoTitle('视频标题'), trigger: 'blur'}
  ],
});
// 提交
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (props.title === "新增") {
        emit("addChange", form);
      } else {
        form.updateTime = new Date().getTime();
        emit("editChange", form);
      }
      dialogVisible.value = false;
    }
  });
};

watch(
  () => props.itemRow,
  (val) => {
    form = val;
  },
  {
    deep: true,
  }
);

watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
    if (!val) {
      // 重置 form 对象
      for (const key in form) {
        form[key] = "";
      }
      // 清除表单验证信息
    }
  }
);
const close = () => {
  for (const key in form) {
    form[key] = "";
  }
  dialogVisible.value = false;
  // 清除表单验证信息
};
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :align-center="props.alineCenter"
    :draggable="props.draggable"
    :overflow="props.overflow"
    :show-close="props.showClose"
    :destroy-on-close="destroyDialog"
    :center="props.center"
    :modal="props.modal"
    :append-to-body="props.appendBody"
    :header="props.title"
    :width="props.width"
    :before-close="emit('update:modelValue', dialogVisible)"
    modal-class="dialog-class"
    class="dialog-style"
    :close-on-click-modal="props.clickBlankToClose"
  >
    <!-- 自定义头部 -->
    <template #header="{ titleId, titleClass }">
      <div class="flex flex-row justify-between gap-4">
        <h4 :id="titleId" :class="titleClass">{{ props.title }}</h4>
      </div>
    </template>

    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
    </template>

    <el-form
      :model="form"
      label-width="auto"
      style="max-width: 600px"
      :rules="rules"
      ref="ruleFormRef"
    >
      <el-form-item label="视频标题：" prop="videoTitle" v-if="form.isVideo">
        <inputCom v-model="form.videoTitle"  />
      </el-form-item>
      <el-form-item label="封面图链接：" prop="poster" >
        <div class="flex items-center gap-4">
          <inputCom v-model="form.poster" />
          <el-image
            v-if="form.poster"
            style="width: 100px; height: 100px;margin-top: 10px;"
            :src="form.poster"
            :preview-src-list="[form.poster]"
            fit="cover"
          />
        </div>
      </el-form-item>
      <el-form-item label="视频链接：" prop="src" v-if="form.isVideo">
        <inputCom v-model="form.src" />
      </el-form-item>
      <el-form-item label="是否显示logo：" >
        <el-switch v-model="form.showLogo" />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style lang="less" scoped></style>

